<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance, Image } from '@arco-design/web-vue'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
const props = defineProps<{
  show: boolean
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm', 'update:id'])
const { store } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({})
const selectedKeys = ref([])
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-base/admin/wx/material/free/publish/page',
        data: query,
      },
      ({ data, code }) => {
        data.records.forEach(item => {
          item.name = item.content.newsItem[0].title
          item.cover = item.content.newsItem[0].url
        })
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const columns = formatColumns([
  {
    title: '图片',
    dataIndex: 'cover',
    valueType: 'image',
  },
  {
    title: '标题',
    dataIndex: 'name',
    // hideInSearch: false,
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
  },
])
const submit = done => {
  if (selectedKeys.value.length) {
    emit('update:id', selectedKeys.value[0])
    emit('update:show', false)
    done(true)
  } else {
    done(false)
    message({
      type: 'error',
      content: '请选择素材',
    })
    console.log(selectedKeys)
  }
}
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" width="800px" title="素材库" @cancel="emit('update:show', false)">
    <ProTable
      v-model:selectedKeys="selectedKeys"
      :row-selection="{
        type: 'radio',
      }"
      :columns="columns"
      :request="request"
      row-key="articleId"
      :form-ref="ref => (formRef = ref)"
      :pagination="pagination"
      header-title=""
      column-resizable
      :scroll="{ x: 1000 }"
      :params="searchQuery"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
    >
      <template #option-render="{ dom, reset }">
        <!-- <component :is="dom[1]" />
        <component :is="dom[0]" /> -->
      </template>
    </ProTable>
  </CModal>
</template>
<style lang="less" scoped></style>
